<template>
    <view class="system-page">
        <view class="system-nav">
            <uni-nav-bar 
                left-icon="back" 
                title="云录制"
                color="#fff"
                backgroundColor="transparent"
                @clickLeft="back"
                :statusBar="true"
                :border="false"
            ></uni-nav-bar>
        </view>
        <view class="system-contain">
            <view class="system-header">
                <view class="form-point"></view>
                <text class="form-text">开始录制前，请选择设备等信息</text>
                <view class="system-form">
                    <uni-forms class="system-base-form" ref="baseForm" :value="form" :rules="rules" label-width="100" label-position="left">
                        <uni-forms-item label="设备名称：" name="deviceName" required>
                            <uni-data-select
                                v-model="form['deviceName']"
                                :localdata="option['deviceNameOption']"
                            ></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="设备通道号：" name="deviceChannelNumber" required>
                            <uni-data-select
                                v-model="form['deviceChannelNumber']"
                                :localdata="option['deviceChannelNumberOption']"
                            ></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="样品种类：" name="sampleType" required>
                            <uni-data-select
                                v-model="form['sampleType']"
                                :localdata="option['sampleTypeOption']"
                            ></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="试验类型：" name="experimentalType" required>
                            <uni-data-select
                                v-model="form['experimentalType']"
                                :localdata="option['experimentalTypeOption']"
                                @change="experimentalTypeChange"
                            ></uni-data-select>
                        </uni-forms-item>
                    </uni-forms>
                </view>
                <button type="primary" class="system-btn" @click.native.prevent="onSubmit">开始录制</button>
            </view>
        </view>
    </view>
</template>

<script>
import { getElementTree } from '@/service/common';

export default {
    name: 'CloudRecordSystemPage',
    data() {
        return {
            rules: {
                deviceName: {
                    rules: [{
                        required: true,
                        errorMessage: '设备名称不能为空'
                    }]
                },
                deviceChannelNumber: {
                    rules: [{
                        required: true,
                        errorMessage: '设备通道号不能为空'
                    }]
                },
                sampleType: {
                    rules: [{
                        required: true,
                        errorMessage: '样品种类不能为空'
                    }]
                },
                experimentalType: {
                    rules: [{
                        required: true,
                        errorMessage: '试验类型不能为空'
                    }]
                }
            },
            form: {
                deviceName: '',
                deviceChannelNumber: '',
                sampleType: '',
                experimentalType: ''
            },
            option: {
                deviceNameOption: [],
                deviceChannelNumberOption: [],
                sampleTypeOption: [],
                experimentalTypeOption: []
            }
        }
    },
    async created() {
        // 设施
        let body1 = {
            element: 'device_name'
        }
        let data1 = await getElementTree(body1)
        this.option.deviceNameOption = data1['data'].map(item => {
            return {
                text: item['name'],
                value: item['code']
            }
        });
        // 通道号
        let body4 = {
            element: 'device_channel_code'
        }
        let data4 = await getElementTree(body4)
        this.option.deviceChannelNumberOption = data4['data'].map(item => {
            return {
                text: item['name'],
                value: item['code']
            }
        });
        // 样品
        let body2 = {
            element: 'sample_kind'
        }
        let data2 = await getElementTree(body2)
        this.option.sampleTypeOption = data2['data'].map(item => {
            return {
                text: item['name'],
                value: item['code']
            }
        });
        // 实验室
        let body3 = {
            element: 'test_type'
        }
        let data3 = await getElementTree(body3)
        this.option.experimentalTypeOption = data3['data'].map(item => {
            return {
                text: item['name'],
                value: item['name']
            }
        });
    },
    methods: {
        back() {
            let url = `/pages/authHome/index`;
            this.$Router.redirect(url);
        },
        experimentalTypeChange(param) {
            console.log('param', param)
        },
        onSubmit() {
            // 当前表单验证有问题，用变量记录处理
            let nullValue = false
            // 循环变量
            for( let key in this.form ) {
                if( !this.form[key] ) {
                    nullValue = true
                }
            }
            if( nullValue === true ) {
                this.$refs.baseForm.validate().then(res => {
                }).catch(err =>{
                    this.show_Toast('none', '表单错误信息：'+JSON.stringify(err), 2000)
                })
                return
            }
            // console.log('this.form', this.form)
            // 拼接参数
            let queryString = Object.keys(this.form).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(this.form[key])}`).join('&')
            // 存储表单信息
            this.$store.commit('CLOUD_RECORD_FORM', this.form)
            // 开始总录制时间
            let time = this.$Moment().format('YYYY-MM-DD HH:mm:ss')
            this.$store.commit('SET_START_RECORD_TIME', time)
            // 开始录制时间
            this.$store.commit('SET_SAMPLE_SCAN_CODE_START_TIME', time)
            // 路由匹配
            let url = `/pages/cloudRecordScanCode/index?${queryString}`
            // 跳转
            this.$Router.redirect(url);
        }
    }
}
</script>

<style lang="scss" scoped>
.system-page {
    height: 100%;
    background-color: #F5F5F5;
    .system-nav {
        height: 350rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url($uni-image-ip+'/clude-nav.png');
    }
    .system-contain {
        display: flex;
        justify-content: center;
        margin-top: -100rpx;
        .system-header {
            border-radius: 20rpx;
            background-color: #ffffff;
            width: 678rpx;
            min-height: 766rpx;
            box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(44, 51, 44, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            .form-point {
                width: 200rpx;
                height: 236rpx;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url($uni-image-ip+'/clude-point.png');

                margin-top: 30rpx;
            }
            .form-text {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #4F77FC;
                line-height: 40rpx;

                margin-top: 48rpx;
            }
            .system-form {
                width: 100%;
                margin-top: 50rpx;
            }
            .system-btn {
                width: 94%;
                font-size: 28rpx;
                height: 78rpx;
                line-height: 78rpx;
                background-color: $uni-color-primary;
                margin-top: 96rpx;
                margin-bottom: 48rpx;
            }
        }
    }
}
</style>